<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            border:0;
        }
        a{
            text-decoration: none;
        }
        body{
            font-family: 微软雅黑, Arial, Helvetica;
            font-size: 14px;

        }
        ul,li{
            list-style: none;
        }
        #menu,#content,#content-box{
            height:1200px;
        }
        /*重用率较高的公共部分*/
        .width2{
            width:2%;
        }
        .width4{
            width:4%;
        }
        .width6{
            width:6%;
        }
        .width9{
            width:9%;
        }
        .width12{
            width:12%;
        }
        .width14{
            width:14%;
        }
        .width27{
            width:27%;
        }
        .width62{
            width:62%;
        }
        .float-l{
            float:left;
        }
        .float-r{
            float: right;
        }
        .font-s12{
            font-size: 12px;
        }
        .color-white{
            color:#FFFFFF;
        }
        .color-black{
            color:#373e44;
        }
        .padding-l40{
            padding-left:40px;
        }
        .red{
            color:#f2362e;
        }
        .grey{
            color:#e4e4e4;
        }
        /*左边导航部分*/
        #menu{
            overflow: hidden;
            color:#60708d;
            float:left;
            width:255px;
            background:#1B2A3B;

        }
        #menu .admin{
            overflow:hidden;
            padding:25px 0 5px 30px;
            border-bottom:1px solid #00A5FD;
        }
        #menu .admin .admin-text{
            height:80px;
            padding:20px 0 0 10px;
        }
        #menu .admin .admin-img{
            border-radius:60px;
        }
        #menu .menu-li{
            padding-top:25px;
        }
        #menu .menu-li li{
            font-size: 16px;
            line-height:46px;
            height:46px;
            width:255px;
        }
        #menu .menu-li li a{
            overflow: hidden;
            display:block;
            cursor: pointer;
            height:22px;
            line-height:22px;
            margin-left:4px;
            padding:12px 0 12px 56px;
        }
        #menu .menu-li .home{
            background:url(backend-img/menu-li/home.png) no-repeat 26px 12px;
        }
        #menu .menu-li .menu{
            background:url(backend-img/menu-li/menu.png) no-repeat 26px 12px;
        }
        #menu .menu-li .article{
            background:url(backend-img/menu-li/article.png) no-repeat 26px 12px;
        }
        #menu .menu-li .member{
            background:url(backend-img/menu-li/member.png) no-repeat 26px 12px;
        }
        #menu .menu-li .member{
            background:url(backend-img/menu-li/member.png) no-repeat 26px 12px;
        }
        #menu .menu-li .files{
            background:url(backend-img/menu-li/files.png) no-repeat 26px 12px;
        }
        #menu .menu-li .comment{
            background:url(backend-img/menu-li/comment.png) no-repeat 26px 12px;
        }
        #menu .menu-li .recycle{
            background:url(backend-img/menu-li/recycle.png) no-repeat 26px 12px;
        }
        .hover{
            background-color:#1d2636!important;
            border-left:4px solid #64b281;
            margin-left: 0!important;
            color:#FFFFFF;
            background-position:26px -44px!important;
        }
        .hovers{
            background-color:#1d2636!important;
            border-left:4px solid #16a4fa;
            margin-left: 0!important;
            color:#FFFFFF;
            background-position:26px -44px!important;
        }
        /*右边内容区域*/
        #content{
            overflow: hidden;
            color:#48525a;
            float:right;
            width:100%;
            margin-left:-255px;
        }
        #content-box{
            margin-left:255px;
            background:#ecf0f1;
        }
        .content-head{
            overflow: hidden;
            background:#FFFFFF;
            height:130px;
        }
        .content-head .keyboard{
            height:80px;
            border-bottom:1px solid #E4E4E4;
        }
        .content-head .search{
            margin-top: 23px;
            float:left;
            height:35px;
            width:260px;
            border-radius:5px;
            background:url(backend-img/content-head/search-ico.png) no-repeat #F0F0F0 12px 9px;
        }
        .content-head .keyboard-botton {
            height:100%;
            float: right;
        }
        .content-head .keyboard-botton a{
            display: inline-block;
            height:60px;
            padding-top:20px;
        }
        .content-head .on-off{
            padding:0 30px;
            margin-left:10px;
            border-left:1px solid #e3e3e3;
        }
        .box{
            overflow: hidden;
            border:1px solid #dddddd;
            background:#FFFFFF;
            padding:20px 24px;
            margin-bottom:30px;
        }
        .box .title{
            width:100%;
            padding-bottom: 20px;
        }
        .box .title span{
            color:#a5b0b4;
        }
        .navigation{
            height:49px;
            line-height: 49px;
        }
        .navigation a{
            color:#373e44;
        }
        .navigation span{
            float: right;
            color:#888888;
            padding-right:20px;
        }
        .navigation .rating{
            padding-left:23px;
            background:url(backend-img/content-head/rating.png) no-repeat 8px 6px;
        }
        .content{
            overflow:hidden;
            padding:25px 15px;
        }
        .help-block{
            color:#E32313;
            font-size:12px;
            height:15px;
            line-height:15px;
            width:200px;
            margin-bottom:5px;
        }
        /*下面的样式是根据页面定制*/
    </style>
    <link rel="stylesheet" type="text/css" href="css/list.css"/>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/Sortable.min.js"></script>
</head>
<body>
<div id="content">
    <div id="content-box">
        <div class="content-head">
            <div class="keyboard padding-l40">
                <input type="text" class="search padding-l40 color-black" placeholder="站内搜索"/>
                <div class="keyboard-botton">
                    <a href="javascript:void(0);"><img src="backend-img/content-head/settings.png"/></a>
                    <a href="javascript:void(0);"><img src="backend-img/content-head/language.png"/></a>
                    <a href="javascript:void(0);" class="information"><img src="backend-img/content-head/information.png"/></a>
                    <a href="javascript:void(0);" class="on-off"><img src="backend-img/content-head/on-off.png"/></a>
                </div>
            </div>
            <div class="navigation padding-l40">
                <a href="javascript:void(0);">导航管理</a><a href="javascript:void(0);" class="rating">列表</a><span>在这里可以自定义导航，以及对导航进行修改和删除,删除后不可恢复。</span>
            </div>
        </div>
        <div class="content">
            <div class="box-head">
                <span class="width4">排序</span>
                <span class="width12">导航名称</span>
                <span class="width6">文章数量</span>
                <span class="width62">导航说明</span>
                <span class="width14">操作</span>
                <span class="width2">批量</span>
            </div>
            <ul id="list">
                <li>
                    <p class="width4">1</p>
                    <p class="width12">首页</p>
                    <p class="width6 red">12</p>
                    <p class="width62">不同分类的文章都可以推荐为 热门，这样就能显示在首页.</p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
                <li>
                    <p class="width4">2</p>
                    <p class="width12">作品展示</p>
                    <p class="width6 red">24</p>
                    <p class="width62">主要展示个人作品</p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
                <li>
                    <p class="width4">3</p>
                    <p class="width12">PHP</p>
                    <p class="width6 red">6</p>
                    <p class="width62">一些关于php的文章.</p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
                <li>
                    <p class="width4">4</p>
                    <p class="width12">软件教程</p>
                    <p class="width6 red">60</p>
                    <p class="width62">ps \ ai \ ae等软件的教程 </p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
                <li>
                    <p class="width4">5</p>
                    <p class="width12">首页</p>
                    <p class="width6 red">12</p>
                    <p class="width62">不同分类的文章都可以推荐为 热门，这样就能显示在首页.</p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
                <li>
                    <p class="width4">6</p>
                    <p class="width12">首页</p>
                    <p class="width6 red">12</p>
                    <p class="width62">不同分类的文章都可以推荐为 热门，这样就能显示在首页.</p>
                    <p class="width14">
                        <a class="delete-one" href="javascript:void(0);"><img src="backend-img/content/delete-one.png"/></a>
                        <a class="article-all" href="javascript:void(0);"><img src="backend-img/content/article-all.png"/></a>
                        <a class="update-one" href="javascript:void(0);"><img src="backend-img/content/update-one.png"/></a>
                    </p>
                    <p class="width2 checkbox checkbox-off">
                        <input type="hidden" name="id" value="0">
                    </p>
                </li>
            </ul>
            <div class="box-footer">
                <div class="box-footer-button">
                    <input type="submit" class="delete-menu" value=""/>
                    <a href="javascript:void(0);"><img src="backend-img/content/new-all.png"/></a>
                    <a href="javascript:void(0);"><img src="backend-img/content/add-menu.png"/></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="menu">
    <div class="admin">
        <img class="admin-img float-l" src="backend-img/menu-admin/admin-img.png"/>
        <p class="admin-text float-l">
            <span class="color-white">用户 / admin</span><br/>
            <span class="font-s12">超级管理员</span>
        </p>
    </div>
    <div class="menu-li">
        <ul>
            <li><a class="home hovers">首页</a></li>
            <li><a class="menu">导航管理</a></li>
            <li><a class="article">文章管理</a></li>
            <li><a class="member">会员管理</a></li>
            <li><a class="files">文件管理</a></li>
            <li><a class="comment">评论管理</a></li>
            <li><a class="recycle">回收站</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    //左侧导航菜单切换
    $(function(){
        $('.menu-li a').hover(function(){
                    $(this).addClass('hover');
                },function(){
                    $(this).removeClass('hover');
                }
        )
        $('.menu-li a').on("click",function(){
            $('.menu-li a').removeClass('hover hovers');
            $(this).addClass('hovers');
        })
    });
    //复选框点击样式
    $('.checkbox').on('click',function(){
        a=$(this).children('input').val();
        if(a==0){
            $(this).addClass('checkbox-on');
            $(this).removeClass('checkbox-off');
            $(this).children('input').val(1)
        }else{
            $(this).addClass('checkbox-off');
            $(this).removeClass('checkbox-on');
            $(this).children('input').val(0)
        }
    });
    //拖拽更改位置
    var el = document.getElementById('list');
    new Sortable(el);
    new Sortable(el, {
        group: "name",
        store: null, // @see Store
        handle: ".my-handle", // 点击目标元素约束开始
        draggable: ".item",   // 指定那些选项需要排序
        ghostClass: "sortable-ghost",

        onStart: function (/**Event*/evt) { // 拖拽
            var itemEl = evt.item;
        },

        onEnd: function (/**Event*/evt) { // 拖拽
            var itemEl = evt.item;
        },

        onAdd: function (/**Event*/evt){
            var itemEl = evt.item;
        },

        onUpdate: function (/**Event*/evt){
            var itemEl = evt.item; // 当前拖拽的html元素
        },

        onRemove: function (/**Event*/evt){
            var itemEl = evt.item;
        }
    });
</script>
</body>
</html>